<template>
	<view>
		<view class="section-1 flex-between">
			<view class="info-1">
				剩余：<text>{{ studentList.length }}</text>名额
			</view>
			<view class="info-2 flex-align" @click="openInfo">
				<text>添加</text>
				<u-icon name="plus-circle" color="#2F75FA" size="17"></u-icon>
			</view>
		</view>

		<label class="section-2" v-for="(item, index) in studentList" :key="index" @click="radioChecked(index, item)">
			<radio-group @change="radioChange">
				<view class="item flex-between">
					<view class="flex-align">
						<view class="radioBox" style="padding-left: 34rpx">
							<radio color="#2f75fa" :value="item.id" :checked="item.checked == false ? false : true" />
						</view>
						<u--image width="60" height="60" shape="circle"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/4a3dd8beebefa526dcd4b7bb7e68492c883760c8.png">
						</u--image>
						<view class="info">
							<view class="name">{{ item.student_info["姓名"] }}</view>
							<view class="phone">{{ item.student_info["手机号"] }}</view>
						</view>
					</view>

					<!-- <view class="flex-align img-list">
						<image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3399e0502a26dd8e2a751a7ba7755b4854734624.png"></image>
						<image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/989b8b039b5dc08a4a644d3390f2c30644d050fa.png"></image>
					</view> -->
				</view>
			</radio-group>
		</label>

		<view class="footer" @click="doPay"> 确定 </view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				field: [],
				studentList: [],
				chooseStudent: [],
			};
		},
		onLoad(options) {
			this.field = options.field;
			this.selectStudent();
		},
		onShow() {
			this.selectStudent();
		},
		methods: {
			radioChecked(index, item) {
				if (this.studentList[index].checked == false) {
					this.studentList[index].checked = true;
				} else {
					this.studentList[index].checked = false;
				}
			},
			async selectStudent() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					openid: uni.getStorageSync("openid"),
				};
				let res = await train.selectStudent(postData);
				if (res.code == 1) {
					this.studentList = res.data.train;
				}
			},
			radioChange() {},
			openInfo() {
				uni.navigateTo({
					url: "/pages_other/train/addInfo?field=" + this.field,
				});
			},
			doPay() {
				this.studentList.forEach((item, index) => {
					if (item.checked == true) {
						this.chooseStudent.push(item);
					}
				});
				uni.setStorageSync("chooseStudent", JSON.stringify(this.chooseStudent));
				uni.navigateBack({
					delta: 1
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.section-1 {
		background: #f3f3f3;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.info-1 {
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;

			text {
				color: #2f75fa;
				margin-right: 8rpx;
			}
		}

		.info-2 {
			font-size: 11px;
			font-weight: 500;
			color: #2f75fa;

			text {
				margin-right: 8rpx;
			}
		}
	}

	.section-2 {
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.item {
			.radioBox {
				margin-right: 20rpx;
			}

			.info {
				margin-left: 20rpx;

				.name {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
				}

				.phone {
					font-size: 24rpx;
					font-weight: 500;
					color: #bebebe;
					margin-top: 10rpx;
				}
			}

			.img-list {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.footer {
		background-color: #4b89fe;
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
		padding: 15rpx 0;
		border-radius: 40rpx;
		position: fixed;
		bottom: 20rpx;
		width: calc(100% - 60rpx);
		text-align: center;
		margin: 0 30rpx;
	}
</style>
